<template>
  <ElForm ref="form" :modal="form" class="add-special-item">
    <ElCard>
      <ElRow class="padding-60">
        <ElCol :span="12">
          <ElRow>
            <ElCol :span="24">
              <span class="must-check">* </span>项目名称：
              <ElInput
                v-model="form.commodity_name"
                class="product-name"
                placeholder="请输入内容"
              ></ElInput>
            </ElCol>
          </ElRow>

          <ElRow>
            <ElCol :span="24">
              <span class="must-check">* </span>项目描述：
              <ElInput
                v-model="form.introduce"
                :autosize="{minRows: 3, maxRows: 4}"
                type="textarea"
              ></ElInput>
            </ElCol>
          </ElRow>
        </ElCol>
        <ElCol :span="12">
          <ElRow v-for="(p, i) in price" :key="i">
            <ElCol :span="24">
              <span class="must-check">* </span>项目价格({{ p.grade }}服务)：
              <ElInput
                v-if="p.id === 1"
                v-model="form.price_primary"
                style="width:100px;"
              ></ElInput>
              <ElInput
                v-if="p.id === 2"
                v-model="form.price_advanced"
              ></ElInput>
              <ElInput v-if="p.id === 3" v-model="form.price_chief"></ElInput>
            </ElCol>
          </ElRow>
          <ElRow>
            <ElCol :span="24">
              <span class="must-check">* </span>调护建议：
              <ElInput
                v-model="form.daily"
                :autosize="{minRows: 3, maxRows: 4}"
                type="textarea"
              ></ElInput>
            </ElCol>
          </ElRow>
        </ElCol>
      </ElRow>
      <PhotoAdd
        class="padding-60"
        :img="imgUrl"
        @photoImgUrl="photoImgUrl"
        @imgLoading="imgLoading"
      />
    </ElCard>
    <ElCard class="fix-hand">
      <ElRow>
        <ElCol :span="24" style="position: relative;">
          <span class="must-check">* </span>固定方案：
          <div
            class="select-box"
            style="position: absolute; right: 0; left: 91px; top: -10px;"
          >
            <ElSelect
              v-model="hand"
              filterable
              width="100%"
              placeholder="请选择穴位或输入关键词搜索"
            >
              <ElOption
                v-for="item in hands"
                :key="item.meridian_id"
                :label="item.meridian_name"
                :value="JSON.stringify(item)"
              >
              </ElOption>
            </ElSelect>
          </div>
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="24">
          <ElTable :data="form.hand" class="hand-box">
            <ElTableColumn
              align="center"
              prop="name"
              label="穴位"
              min-width="80"
            >
            </ElTableColumn>
            <ElTableColumn
              align="center"
              prop="time"
              label="时间"
              min-width="180"
            >
              <template slot-scope="scope">
                <ElInput
                  v-model="scope.row.minutes"
                  placeholder="请输入时间"
                  class="input-time"
                ></ElInput>
              </template>
            </ElTableColumn>
            <ElTableColumn align="center" label="单位">分钟</ElTableColumn>
            <ElTableColumn align="center" label="操作">
              <template slot-scope="scope">
                <i class="el-icon-delete" @click="deleteHand(scope.row.id)"></i>
              </template>
            </ElTableColumn>
          </ElTable>
        </ElCol>
      </ElRow>
    </ElCard>
    <ElRow>
      <ElCol class="product-submit" :span="24">
        <ElButton round @click="submitForm">提交</ElButton>
      </ElCol>
    </ElRow>
  </ElForm>
</template>

<script>
import _ from 'lodash';
import Cookie from 'js-cookie';
import {http, catchAppError} from '@/util';
import {menusNavigation} from '@/store';
import toast from '@/toast';
import url from '@/config';
import PhotoAdd from './PhotoAdd.vue';

export default {
  components: {
    PhotoAdd
  },
  props: {
    params: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      imgUpLoading: false,
      imgUrl: '',
      url,
      hands: [],
      hand: {},
      headers: {
        token: Cookie.get('token')
      },
      price: [],
      form: {
        commodity_name: '',
        price_primary: '',
        price_advanced: '',
        price_chief: '',
        thumbnail: '',
        hand: [],
        introduce: '',
        daily: ''
      }
    };
  },
  watch: {
    hand() {
      const hand = JSON.parse(this.hand);
      this.form.hand.push({
        id: hand.meridian_id,
        name: hand.meridian_name,
        minutes: 0
      });
    }
  },
  beforeMount() {
    if (this.params.id && this.params.nav === '2') {
      http
        .post(url.getCustom, {commodity_id: this.params.id})
        .then(res => {
          this.form = {
            commodity_name: res.commodity_name,
            thumbnail: res.thumbnail.value,
            price_primary: res.price.price_primary || 0,
            price_advanced: res.price.price_advanced,
            price_chief: res.price.price_chief,
            hand: res.hand,
            introduce: res.introduce,
            daily: res.daily
          };
          this.imgUrl = res.thumbnail.photo;
        })
        .catch(catchAppError);
    }
    http
      .get(url.masseurLevel)
      .then(res => {
        this.price = res;
      })
      .catch(catchAppError);
    http
      .post(url.getHand)
      .then(res => {
        this.hands = res;
      })
      .catch(catchAppError);
  },
  methods: {
    photoImgUrl(url) {
      this.form.thumbnail = url;
    },
    imgLoading(i) {
      this.imgUpLoading = i;
    },
    submitForm() {
      if (this.imgUpLoading) {
        toast('图片正在上传，稍后提交');
        return;
      }
      const allPrice = this.checkPrice();

      const allIsCheck =
        this.form.commodity_name &&
        this.form.introduce &&
        this.form.daily &&
        this.form.hand.length &&
        allPrice;
      if (!allIsCheck) {
        toast('必填项不能为空');
        return;
      }
      const params = this.form;
      const custom = this.params.id ? url.upCustom : url.addCustom;
      if (this.params.id) {
        params.id = this.params.id;
      }
      http
        .post(custom, params)
        .then(() => {
          this.resetData();
          menusNavigation.navTab('ProjectManage', '2');
        })
        .catch(catchAppError);
    },
    resetData() {
      this.$refs.form.resetFields();
    },
    checkPrice() {
      const isPrimary = this.price[0] && this.form.price_primary;
      const isAdvanced = this.price[1] && this.form.price_advanced;
      const isChief = this.price[2] && this.form.price_chief;
      if (this.price.length === 1) {
        return isPrimary;
      }
      if (this.price.length === 2) {
        return isPrimary && isAdvanced;
      }
      if (this.price.length === 3) {
        return isPrimary && isAdvanced && isChief;
      }
      return false;
    },
    deleteHand(id) {
      const i = _.findIndex(this.form.hand, hand => hand.id === id);
      this.form.hand.splice(i, 1);
    }
  }
};
</script>

<style lang="scss">
.add-special-item {
  .product-submit {
    margin-top: 55px;
    text-align: center;
    .el-button {
      width: 230px;
      padding: 14px 0;
      background-color: #ffb03e;
      border-color: #ffb03e;
      color: #fff;
    }
  }
  .el-card {
    margin-bottom: 25px;
    &.fix-hand {
      padding: 0 60px;
    }
    .el-card__body {
      padding: 24px 0;
    }
    .hand-box {
      margin-top: 17px;
      margin-left: 91px;
      border: 1px solid #dbe9ff;
      &.el-table {
        width: initial;
        thead {
          color: #4b90ff;
        }
        td,
        th.is-leaf {
          border: 0;
        }
        th {
          background-color: #eef5ff;
        }
      }
    }
    .padding-60 {
      padding-left: 60px;
      padding-right: 60px;
    }
    .el-col-12 {
      .el-input,
      .el-textarea {
        margin-bottom: 30px;
        vertical-align: top;
        display: inline-block;
        width: 320px;
        margin-top: -6px;
      }
    }
    .input-time {
      width: 80px;
    }
    .el-icon-delete {
      color: #f56b6b;
      font-size: 18px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
